<template>
  <v-chart :options="options" />
</template>
<script>
import 'echarts/extension/bmap/bmap'

const testPoint = [{
  name: '海门',
  value: [121.15, 31.89, 180]
}, {
  name: '南京',
  value: [118.78, 32.04, 100]
}, {
  name: '烟台',
  value: [121.453267, 37.473706, 150]
},
{
  name: '天津',
  value: [117.217865, 39.090655, 190]
},
{
  name: '杭州',
  value: [120.212061, 30.250586, 170]
}, {
  name: '深圳',
  value: [114.066277, 22.551126, 210]
}, {
  name: '首尔',
  value: [126.976244, 37.580721, 230]
}, {
  name: '青岛',
  value: [120.387733, 36.072227, 150]
}, {
  name: '厦门',
  value: [118.09931, 24.48646, 110]
}, {
  name: '成都',
  value: [104.075763, 30.577544, 150]
}
]
const testPoint2 = [{
  name: '上海',
  value: [121.482265, 31.235929, 100]
}, {
  name: '北京',
  value: [116.404763, 39.915794, 200]
}, {
  name: '西安',
  value: [108.953939, 34.349653, 160]
},
{
  name: '香港',
  value: [114.178067, 22.28507, 120]
},
{
  name: '澳门',
  value: [113.57631, 22.143356, 90]
}
]
export default {
  data () {
    return {
      options: {
      }
    }
  },
  mounted () {
    this.options = {
      title: {
        text: '华清外卖销售数据大盘',
        subtext: '销售数据统计',
        sublink: 'http://www.baidu.com',
        left: 'center'
      },
      bmap: {
        key: 'G1LFyjrNGIkns5OfpZnrCGAKxpycPLwb',
        center: [104.114129, 37.55039],
        zoom: 5,
        roam: true
      },
      tooltip: {}, // 不明白用途
      series: [{
        // 鼠标经过显示的提示信息
        name: '销售额',
        type: 'scatter', // 散点图
        coordinateSystem: 'bmap', // 地图选择项bmap为百度地图
        data: testPoint,
        encode: {
          // value是数组 下标值 2  表示的是第三个数据
          value: 2 // 有一个问题如果是根据下标进行的那我在后面加了数据后为什么3和4都显示的是下标1的坐标呢
        },
        // 定制点的颜色
        itemStyle: {
          color: 'blue',
          shadowBlur: 10,
          shadowColor: '#333'
        },
        // 定制点的大小
        // 根据什么进行计算点的大小呢
        // 查了一下,这就是一个固定的方法,记住即可
        // 其中这个[2]代表的是encode:{value:2}的所的数值也就是数据中的第三个值
        symbolSize: function (val) {
          return val[2] / 10
        },
        // 对abel定制 在原点显示value的值
        label: {
          // true-显示value的值
          show: false,
          // 内容的位置
          position: 'top',
          formatter: function (value) {
            console.log(value)
            return `${value.data.name} - ${value.data.value[2]}`
          }
        },
        // hoverAnimation: true,
        // rippleEffect: {
        //   brushType: 'stroke'
        // },
        // 如果想鼠标经过显示 label 需要把label中的show设置为false
        emphasis: {
          label: {
            show: true
          }
        }
      },
      {
        name: '销售额',
        type: 'effectScatter', // 波纹散点图
        coordinateSystem: 'bmap',
        data: testPoint2,
        // 定制点的大小
        symbolSize: function (val) {
          return val[2] / 10
        },
        encode: {
          value: 2
        },
        // 对abel定制 在原点显示value的值
        label: {
          // formatter: '{b}'
          formatter: function (value) {
            console.log(value)
            return `${value.data.name} - ${value.data.value[2]}`
          },
          // 内容的位置
          position: 'right',
          // true-显示value的值
          show: true
        },
        // 鼠标经过显示动画
        hoverAnimation: true, // 可以问一个问题
        // 定制波纹的效果
        rippleEffect: {
          brushType: 'stroke'
        },
        // 修改波纹线的颜色
        itemStyle: {
          color: 'purple',
          shadowBlur: 10,
          shadowColor: '#333'
        }
      }]
    }
  }
}
</script>
<style scoped lang="scss">
</style>
